import React, { Component } from "react";
// 只有类组件可以定义自己的状态, 函数组件是没有state的

class App extends Component {
  // 定义state有两种方式
  // 1. 使用构造函数的构造器进行申明
  // constructor是一个特殊的函数，只要这个类被实例化了就会自动调用，并且是最先调用
  // constructor() {
  //   // 只有调用super方法之后才可以使用this
  //   super();
  //   this.state = {
  //     name: "zhangsan",
  //     count: 10,
  //   };
  // }

  // 2. 直接使用字面量申明
  state = {
    name: "zhangsan",
    count: 10,
    show: true,
    arr: [1, 2, 3, 4],
  };

  render() {
    const { name, count, show, arr } = this.state;
    return (
      <>
        <h2>state的定义和使用</h2>
        <p>
          {name} - {count}
        </p>
        {/* 条件渲染 */}
        {/* {show ? <p>哈哈</p> : null} */}
        {show && <p>哈哈</p>}

        {/* 循环渲染 */}
        <ul>
          {arr.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </>
    );
  }
}

export default App;
